<template>
	<view class="audio-box bai left clearfix">
		<!--头部导航-->
		<top :scrollTop = "scrollTop"></top>
		<view class="audio-content left clearfix">
			<view class="works-title left clearfix">
				<view class="works-titles left">
					<label style="font-weight:400;" @click="backToAudioIndex()">
						<uni-icons type="left" size="20" color="#666"></uni-icons>
					</label>
					<label class="ellipsis">{{titleItem.title}}</label>
				</view>
				
				<view class="audio-add right" @click="setShowAddTimbre()">
					<uni-icons type="icon-shangchuan5" size="15" color="#fff" style="margin-right:3px;" custom-prefix="iconfont"></uni-icons>添加章节
				</view>
				
				
				<view class="works-so right clearfix">
					<label>
						<input placeholder="搜索关键词" :focus="keywordFocus" v-model="keyword" maxlength="100" />
					</label>
					<label @click="getDataListByKeyword()">
						<uni-icons type="search" size="25" color="#666"></uni-icons>
					</label>
					
				</view>
				
				<view class="works-shaixuan right clearfix relative" @mouseenter="showMenu = true" @mouseleave="showMenu = false">
					<label>时间排序</label>
					<label>
						<uni-icons :type="showMenu==false?'bottom':'top'" size="13" color="#333"></uni-icons>
					</label>
					<view class="works-shaixuan-menu absolute" v-if="showMenu == true">
						<view class="works-shaixuan-item left" :style="order=='create_date desc'?'color:#2979ff;font-weight:bold;':'color:#333;font-weight:400;'" @click="order = 'create_date desc'">
							最新
						</view>
						
						<view class="works-shaixuan-item left" :style="order=='create_date asc'?'color:#2979ff;font-weight:bold;':'color:#333;font-weight:400;'" @click="order = 'create_date asc'">
							最早
						</view>
						
						
					</view>
				</view>
				
				<view class="audio-contents left clearfix">
					<uni-table stripe emptyText="暂无更多数据">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th style="padding:0px;" align="center" width="70">序号</uni-th>
							<uni-th  style="padding:0px;" align="center">标题</uni-th>
							<uni-th  style="padding:0px;" align="center" width="70">播放</uni-th>
							<uni-th  style="padding:0px;" align="center" width="70">发布</uni-th>
							<uni-th  style="padding:0px;" align="center" width="200">创建时间</uni-th>
							<uni-th  style="padding:0px;" align="center" width="320">操作</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item,index) in data">
							<uni-td align="center">{{item.sort}}</uni-td>
							<uni-td>{{item.title}}
							<label style="margin-left:10px;" title="修改" @click="setEdit(item,index)"><uni-icons type="icon-chuangzuo2" size="16" color="#666" custom-prefix="iconfont"></uni-icons></label>
							<label style="margin-left:15px;" title="复制" @click="setCopy(item,index)"><uni-icons type="icon-fuzhi5" size="16" :color="copyIndex==index?'#18bc37':'#666'" custom-prefix="iconfont"></uni-icons></label>
							</uni-td>
							<uni-td align="center" v-if="item.audio && new Date().getTime() - item.create_date > 120000" style="cursor:pointer">
								<uni-icons v-if="currentPlayAudioIndex!=index || currentPlayAudioStatus=='pause' || currentPlayAudioIndex===null" type="icon-bofang2" size="15" @click="setPlay(item,'play',index)" color="#00c296" custom-prefix="iconfont"></uni-icons>
								<uni-icons v-if="currentPlayAudioIndex==index && currentPlayAudioStatus=='play'" type="icon-weibiaoti519" size="15" @click="setPlay(item,'pause',index)" color="#00c296" custom-prefix="iconfont"></uni-icons>
							</uni-td>
							<uni-td align="center" v-else-if="item.audio && new Date().getTime() - item.create_date < 120000" style="font-size:12px;color:#999;">
								生成中
							</uni-td>
							<uni-td align="center" v-else style="font-size:12px;color:#ccc;">
								--
							</uni-td>
							<uni-td align="center" v-if="item.is_publish==true" @click="alertPublish(item,index)" style="color:#18bc37;cursor:pointer;" title="更改状态">已发布</uni-td>
							<uni-td align="center" v-if="item.is_publish==false" @click="alertPublish(item,index)" style="color:#ccc;cursor:pointer;" title="更改状态">--</uni-td>
							<uni-td align="center"><uni-dateformat format="yyyy-MM-dd hh:mm" :date="item.create_date"></uni-dateformat></uni-td>
							<uni-td align="center">
								<view class="audio-buttons left" title="配音" v-if="item.audio && new Date().getTime() - item.create_date > 120000" @click="downloadFile(item)">
									<uni-icons type="icon-xiazai5" size="13" color="#fff" style="margin-right:3px;" custom-prefix="iconfont"></uni-icons>
									下载
								</view>
								<view class="audio-buttons left" title="配音" v-else style="background:#eee;color:#999;">
									<uni-icons type="icon-xiazai5" size="13" color="#999" style="margin-right:3px;" custom-prefix="iconfont"></uni-icons>
									下载
								</view>
								<view class="audio-buttons left" title="配音" @click="navigateTo(item,index)">
									<uni-icons type="icon-shangchuan5" size="13" color="#fff" style="margin-right:3px;" custom-prefix="iconfont"></uni-icons>
									发布
								</view>
								<view class="audio-buttons left" title="配音" @click="navigateToTimbre(item,index)">
									<uni-icons type="icon-a-5Jyinboyinpin" size="13" color="#fff" style="margin-right:3px;" custom-prefix="iconfont"></uni-icons>
									配音
								</view>
								
								<view class="audio-buttons left" style="background:#e43d33;" title="删除" @click="alertRemove(item,index)">
									<uni-icons type="icon-shanchu3" size="13" color="#fff" style="margin-right:3px;" custom-prefix="iconfont"></uni-icons>
									删除
								</view>
								
								
							</uni-td>
						</uni-tr>
					
					</uni-table>
				</view>
				
				<view class="audio-page-box left clearfix">
					<uni-pagination pageSize="20" @change="getDataListByPage" title="标题文字" :total="total" :current="currentPage"></uni-pagination>
				</view>
				
			</view>
		</view>
		
		<!--添加弹窗-->
		<add-chapter-popup :sortNumber="total" :editData="currentEditData" :parentId="titleItem.id" :userinfo="userinfo" @close="showAddTimbre = false" @confirm="addData" :show="showAddTimbre"></add-chapter-popup>
		<u-modal :show="show" @confirm="remove()" @cancel="show = false" :title="title" :content='content' :showCancelButton="true"></u-modal>
		<u-modal :show="publishShow" @confirm="setPublish()" @cancel="publishShow = false" title="更改确认" content='确定要更改发布状态吗？' :showCancelButton="true"></u-modal>
	</view>
</template>

<style>
	.uni-table-th{padding:0;}
</style>
<style scoped>
	.works-titles label:last-child{width:500px;}
	.works-titles label{float:left;margin-right:10px;}
	.audio-page-box{width:100%;height:40px;}
	.audio-buttons{padding-left:10px;padding-right:10px;background:#2979ff;border-radius: 3px;color:#fff;line-height:30px;height:30px;text-align:center;margin-left:10px;font-size:12px;cursor:pointer;}
	.audio-contents{width:100%;height:550px;margin-top:40px;overflow: auto;}
	.audio-add{margin-left:20px;cursor:pointer;width:120px;height:35px;background-image: linear-gradient(90deg, #4287fe, #298bfe 25%, #0f8ffd 51%, #25b4c1);border-radius: 5px;font-size:14px;color:#fff;text-align: center;line-height:35px;margin:2.5px;}
	.audio-content{width:96%;margin-left:2%;min-height:720px;margin-top:65px;background:#fff;border-radius: 20px;min-width:1380px;}
</style>

<script>
	import common from "@/static/js/common.js";
	var global = uniCloud.importObject('global',{customUI:true});
	var db = uniCloud.database();
	export default {
		data() {
			return {
				publishShow:false,
				innerAudioContext:null,//音频播放数据
				audioItem:{},//正在播放的数据
				currentPlayAudioIndex:null,//当前正在播放的index
				currentPlayAudioStatus:null,//当前播放状态
				keyword:'',//关键词
				order:'sort desc,create_date desc',
				showAddTimbre:false,//弹出添加弹窗
				scrollTop:0,
				showMenu:false,
				userinfo:{},//登录用户信息
				data:[],
				currentPage:1,
				title:'删除确认',
				content:'确认要删除吗？',
				show:false,
				currentRemoveItem:{},//当前删除数据
				keywordFocus:false,
				titleItem:{},
				copyIndex:null,
				total:0,
				currentPublishItem:{},//当前更改的发布数据
				currentEditData:{},//当前编辑内容
			}
		},
		watch:{
			"order"(val){
				this.getDataList(this.userinfo,1);
			}
		},
		onLoad(e) {
			var that = this;
			if(e && e.id && this.userinfo && this.userinfo._id){
				this.titleItem = {
					id:e.id
				}
				//查询出专辑信息
				that.getTimbreById(e.id);
				setTimeout(function(){
					that.getDataList(that.userinfo);
				},500);
				
			}else{
				uni.navigateTo({
					url: '/pages/audio/index'
				});
			}
		},
		created() {
			var that = this;
			uni.getStorage({
				key:'login-userinfo',
				success:function(res){
					var userinfo = res.data;
					if(userinfo && userinfo._id){
						that.userinfo = userinfo;
					}else{
						uni.navigateTo({
							url: '/pages/index/index'
						});
					}
				},
				fail() {
					uni.navigateTo({
						url: '/pages/index/index'
					});
				}
			});
			
		},
		onReady() {
			var that = this;
			window.onscroll = function() {
			  that.scrollTop = common.getScrollTop();
			};
		},
		methods: {
			//弹出添加弹窗
			setShowAddTimbre(){
				var that = this;
				this.currentEditData = {};
				this.showAddTimbre = true;
				
			},
			//根据id查询出专辑标题
			getTimbreById(id){
				db.collection('timbre_title').where({_id:id}).field('_id,title').get({getOne:true}).then(res=>{
					this.titleItem.title = res.result.data.title;
				});
			},
			//跳转到配音页面
			navigateToTimbre(item,index){
				var that = this;
				uni.redirectTo({
					url: '/pages/audio/timbre?id='+that.titleItem.id+'&chapter='+item._id
				});
			},
			//弹出编辑
			setEdit(item,index){
				this.currentEditData = {
					item:item,
					index:index
				};
				this.showAddTimbre = true;
			},
			 async downloadFile(item) {
				const url = item.audio;
				 window.open(url, '_blank');
			 },

			//更改发布状态
			setPublish(){
				var item = this.currentPublishItem.item;
				var index = this.currentPublishItem.index;
				if(item && item._id){
					db.collection('timbre_title').where({_id:item._id}).update({is_publish:!item.is_publish}).then(res=>{
						this.publishShow = false;
						this.data[index].is_publish = !item.is_publish;
						uni.showToast({
							title:'更改成功',
							icon:'none'
						})
					});
				}
			},
			//弹出更改发布状态
			alertPublish(item,index){
				this.publishShow = true;
				this.currentPublishItem = {
					item:item,
					index:index
				}
			},
			//设置播放音频
			setPlay(item,act,index){
				var that = this;
				if(item.audio != this.audioItem.audio){
					if(that.innerAudioContext){
						that.innerAudioContext.stop();
					}
					var innerAudioContext = uni.createInnerAudioContext();
					this.innerAudioContext = innerAudioContext;
					this.audioItem = item;
					innerAudioContext.src = item.audio;
					innerAudioContext.autoplay = true;
				}else{
					var innerAudioContext = this.innerAudioContext;
				}
				
				if(act == 'play'){
					innerAudioContext.play();
					innerAudioContext.onPlay(()=>{
						that.currentPlayAudioIndex = index;
						that.currentPlayAudioStatus = 'play';
					});
				}else if(act == 'pause'){
					innerAudioContext.pause();
					that.currentPlayAudioStatus = 'pause';
				}
				
				innerAudioContext.onEnded(()=>{
					that.currentPlayAudioStatus = 'pause';
				});
			},
			//复制
			setCopy(item,index){
				var that = this;
				uni.setClipboardData({
					data: item.title,
					success: function () {
						that.copyIndex = index;
					}
				});
			},
			//返回到音频列表
			backToAudioIndex(){
				uni.navigateTo({
					url: '/pages/audio/index'
				});
			},
			//跳转到章节页面
			navigateTo(item,index){
				uni.navigateTo({
					url: '/pages/audio/chapter?titleId='+item._id
				});
			},
			//根据关键词查询数据
			getDataListByKeyword(){
				
				this.getDataList(this.userinfo,1);
				
			},
			//确认删除弹窗
			alertRemove(item,index){
				if(item.chapter_number > 0){
					uni.showToast({
						title:'该专辑下有音频内容，无法删除',
						icon:'none',
						duration:2000
					})
					return false;
				}
				this.show = true;
				this.currentRemoveItem = {
					item:item,
					index:index
				}
			},
			//删除
			remove(){
				var item = this.currentRemoveItem.item;
				var index = this.currentRemoveItem.index;
				if(item._id){
					db.collection('timbre_title').where({_id:item._id}).remove().then(res=>{
						this.show = false;
						uni.showToast({
							title:'删除成功',
							icon:'none'
						})
						global.setChapterNumber(this.titleItem.id,'dec');
						this.data.splice(index,1);
					}).catch(err=>{
						console.log('err',err);
					});
				}
				
			},
			//添加成功以后
			addData(e){
				if(e && (e.index == 0 || e.index > 0)){
					this.data[e.index] = e.data;
				}else{
					this.data.unshift(e);
				}
				
			},
			//根据分页获取数据
			getDataListByPage(e){
				var userinfo = this.userinfo;
				var page = e.current;
				if(userinfo && userinfo._id && page > 0 && page!=this.currentPage){
					this.getDataList(userinfo,page);
					this.currentPage = page;
				}
			},
			//获取数据
			getDataList(userinfo,page = 1){
				var titleId = this.titleItem.id;
				var keyword = this.keyword;
				uni.showLoading({
					title:'加载中'
				})
				var skip = (page - 1) * 20;
				if(userinfo && userinfo._id){
					if(!keyword){
						db.collection('timbre_title').where({uid:userinfo._id,parent_id:titleId,type:'chapter'}).orderBy(this.order).skip(skip).limit(20).get({getCount:true}).then(res=>{
							var data = res.result.data;
							this.total = res.result.count;
							this.data = data;
							uni.hideLoading()
						});
					}else{
						db.collection('timbre_title').where(db.command.and({uid:userinfo._id,parent_id:titleId,type:'chapter',title: new RegExp(keyword, 'i')})).orderBy(this.order).skip(skip).limit(20).get({getCount:true}).then(res=>{
							var data = res.result.data;
							this.total = res.result.count;
							this.data = data;
							uni.hideLoading()
						});
					}
				}
				
				
			}
		}
	}
</script>

